<template>
  <div class="diskInfoWrap">
    <el-form
        :inline="true"
        :model="searchParams"
        style="width: 100%"
        size="small"
        class="formInline"
    >
      <el-form-item
          label="获票人名称："
      >
        <el-input
            style="width: 220px"
            v-model="searchParams.input1"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="开票名称：">
        <el-input
            style="width: 220px"
            v-model="searchParams.input2"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="启用状态：" style="max-width: 240px;">
        <el-select style="width:160px" v-model="searchParams.select1" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onResize">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button
        type="primary"
        size="small"
        @click="openSaveUpdateDialog"
        style="margin: 4px 0"
    >
      新增
    </el-button>
    <el-button type="primary" @click="customEdit" size="small" style="margin: 0 16px">
      修改
    </el-button>
    <el-button
        type="primary"
        @click="disable"
        size="small"
        style="margin: 4px 0"
    >
      停用
    </el-button>

    <tableList
        :showIndex="true"
        :radioSelect="true"
        border
        highlight-current-row
        :heightMin="130"
        :pageNumber="pages.current"
        :pageSize="pages.size"
        :total="pages.total"
        :keySet="keySet"
        :autoHeight="true"
        :tableData="listDetails"
        :paginationShow="true"

        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"

        @radioHandleCurrentChange="radioHandleCurrentChange"
        @rowDblclick="rowDblclick"
    >
    </tableList>

   <saveUpdate ref="saveUpdate"></saveUpdate>
    <detail ref="detail"></detail>
  </div>
</template>

<script>

import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import saveUpdate from '@/views/custom/saveUpdate.vue'
import detail from '@/views/custom/detail.vue'
import { getPage, disable } from '@/api/custom.js'

export default {
  name: 'custom',
  mixins: [mixinTable],
  data() {
    return {
      time: '',
      loadingPop: false,
      gridData: [],
      historyDialog: false,
      saveUpdateShow: false,
      listDetails: [],
      keySet: [
        {
          label: '启用状态',
          englishName: 'infoStatusStr',
          width: '100px'
        },
        {
          label: '获票人名称',
          englishName: 'hprmc',
          width: '200px'
        },
        {
          label: '开票名称',
          englishName: 'kpmc',
          width: '100px'
        },
        {
          label: '开票人纳税人识别号',
          englishName: 'kprnsrsbh',
          // width: '300px'
        },
        {
          label: '购买方地址',
          englishName: 'gmfdz',
          // width:'300px'
        },
        {
          label: '购买方电话',
          englishName: 'gmfdh',
          // width: '200px'
        },
        {
          label: '购买方开户行',
          englishName: 'gmfkhh',
          // width: '80px'
        },
        {
          label: '购买方银行账号',
          englishName: 'gmfyhzh',
          width: 'labelWidth'
        },
        {
          label: '维护时间',
          englishName: 'updatedTime'
        }
      ],
      selectRow:null,

    }
  },
  created() {
    this.getList()
  },
  methods: {
    onSubmit() {
      this.getList()
    },
    onResize() {
      // this.onResizeFn()
      this.pages.current=1
      this.searchParams.input1=''
      this.searchParams.input2=''
      this.searchParams.select1=''
      this.getList()
    },
   async getList(){
    this.loading = true
    let {data, code, message} = await getPage(
        {
          hprmc: this.searchParams.input1,
          kpmc: this.searchParams.input2,
          infoStatus: this.searchParams.select1,
          pageNo: this.pages.current,
          pageSize: this.pages.size,
        }
    )
    if (code == 200) {
      this.loading = false
      this.listDetails = data.records
      this.time = data.records[0]?.createTime

      this.pages.total = data.total
      this.pages.current = data.current
      this.pages.size = data.size

    } else {
      this.$message({
        type: 'error',
        message: message,
      })
    }
    this.loading = false
},
    // 单选
    radioHandleCurrentChange(val) {
      this.selectRow = val
    },
    // 双击查看详情
    rowDblclick(val) {
      this.selectRow = val
      this.$refs.detail.initInfo(this.selectRow.id)
      this.$refs.detail.dialogFormVisible=true
    },
    customEdit(){
      if(this.selectRow){
        if (this.selectRow.infoStatus!==1) {
          this.$message({
            type: 'warning',
            message: '只能选择启用状态的数据。',
          })
          return
        }
        this.$refs.saveUpdate.initInfo(this.selectRow.id)
        this.$refs.saveUpdate.dialogFormVisible=true

      }else{
        this.$message({
          type: 'warning',
          message: '请选择 1 条要修改的客户信息',
        })
      }
    },
    openSaveUpdateDialog() {
      this.$refs.saveUpdate.clearInfo()
      this.$refs.saveUpdate.dialogFormVisible=true;
    },
    // 停用
    disable() {
      if(this.selectRow){
        if (this.selectRow.infoStatus!==1) {
          this.$message({
            type: 'warning',
            message: '只能选择启用状态的数据。',
          })
          return
        }

        this.$alert('您确定要停用所选择的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: true,
          type: 'warning',
        }).then(async () => {
          let {data, code, message} = await disable(
              {id:this.selectRow.id},
          )
          if (code == 200) {
            this.$message({
              type: 'success',
              message: message,
            })
            this.onResize()
            // 取消选中的记录
            this.selectRow=null
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })

      }else{
        this.$message({
          type: 'warning',
          message: '请选择 1 条要停用的客户信息',
        })
      }
    },
  },
  components: {
    tableList,
    saveUpdate,
    detail,
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;
  // padding: 10px;
  .head {
    display: flex;
    height: 18px;
    align-items: center;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .formInline :deep .el-form-item--small {
    margin-bottom: 4px;
  }
}
</style>
